<template>
  <!--系统图 视图部分-->
  <div style="min-height: 800px;">
    <Row class="fatherToolBar">
      <Col span="4">
        <div class="ddz2">
          <div class="ddx8">工厂:</div>
          <div class="ddz3">
            <Select v-model="factName" @on-change="selectChange">
              <Option v-for="item in spaceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
        </div>
      </Col>
      <Col span="4">
        <div class="ddz2">
          <div class="ddx9">系统图名称:</div>
          <div class="ddz3">
            <Input v-model="sysName" placeholder="系统图名称..." @on-enter="doSearchPic"></Input>
          </div>
        </div>
      </Col>
      <Col span="1" style="float: right;margin-right: 10px;">
        <Button type="primary" @click="jumpEdit(null)">新增系统图</Button>
      </Col>
      <Col span="13"></Col>
    </Row>
    <Row :gutter="6" style="padding-left: 5px;">
      <Col span="6" class="imgCard" v-for="(im, index) in imgs" :key="index" @click.native="jumpEdit(im)">
        <ImgListCard :info="im"></ImgListCard>
      </Col>
    </Row>
  </div>
</template>

<script>
  import ImgListCard from './ImgListCard'

  export default {
    name: 'SysView',
    props: ['edit'],
    components: {ImgListCard},
    created: function () {
      this.getSpaceList()
      this.loadImgsData()
    },
    data: function () {
      return {
        spaceList: [],
        imgs: [],
        sysName: '',
        factName: ''
      }
    },
    methods: {
      getSpaceList: function () {
        this.spaceList = this.$store.state.spaces[0].children
      },
      loadImgsData: function () {
        this.doLoadOperation({page: 0, size: 10000})
      },
      doLoadOperation: function (params) {
        window.myapi.sys_list(params).then(res => {
          if (res.data.status === 200 && res.status === 200) {
            this.imgs = res.data.data.content
          } else {
            this.$Message.error(res.data.msg)
          }
        }).catch(reason => {
          this.$Notice.info(reason)
        }).finally(() => {
        })
      },
      selectChange: function (id) {
        if (id) {
          this.sysName = ''
          let params = {page: 0, size: 10000, spaceId_eq: id}
          this.doLoadOperation(params)
        }
      },
      doSearchPic: function () {
        this.factName = ''
        let params = {page: 0, size: 10000, sysName_like: this.sysName}
        this.doLoadOperation(params)
      },
      jumpEdit: function (item) {
        this.$emit('tell-edit', item)
        this.imgs = []
      },
      askPic: function (picUrl) {
        window.myapi.show_pic({url: picUrl}).then(resp => {
          let image = 'data:image/png;base64,' + btoa(
            new Uint8Array(resp.data)
              .reduce((data, byte) => data + String.fromCharCode(byte), '')
          )
          return image
        }).catch(info => {
          this.$Notice.warning({
            title: '操作提示',
            desc: info
          })
        }).finally((fin) => {
        })
      }
    }
  }
</script>

<style scoped>
  .fatherToolBar {
    margin-bottom: 10px;
    border-bottom: solid #e4e0e0 1px;
    padding-bottom: 5px;
  }

  .imgCard {
    width: 320px;
    height: 200px;
    cursor: pointer;
    border: solid 1px #dad6d6;
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .imgCard:hover {
    background: #f6f6f6;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.47);
  }

  .ddz2 {
    display: flex;
  }

  .ddz3 {
    flex: 1;
  }

  .ddx8 {
    flex: 0 0 50px;
    line-height: 32px;
    text-align: right;
    padding-right: 10px;
  }

  .ddx9 {
    flex: 0 0 80px;
    line-height: 32px;
    text-align: right;
    padding-right: 10px;
  }
</style>
